<template>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 py-2 gap-4 md:gap-2 gva-container2">
    <gva-card title="" custom-class="col-span-1 md:col-span-2 lg:col-span-4 row-span-2">
      <gva-chart :type="9" />
    </gva-card>
    <!-- <gva-card title="使用频次" custom-class="col-span-1 md:col-span-2 md:row-start-2 lg:col-span-6 col-start-1 row-span-2">
      <gva-chart :type="5" />
    </gva-card> -->
    <div class="col-span-1 lg:col-span-4 flex flex-wrap gap-4">
      <gva-card custom-class="flex-1 h-250">
        <gva-chart :type="5" title="使用频次" />
      </gva-card>
      <gva-card custom-class="flex-1 h-250">
        <gva-chart :type="6" title="业务应用" />
      </gva-card>
    </div>

   <div class="col-span-1 lg:col-span-4 flex flex-wrap gap-4">
      <!-- 包裹为垂直排列 -->
        <gva-card title="各平台使用信息统计" custom-class="flex-1 h-42">
          <gva-chart :type="10" />
        </gva-card>
        <div class="flex flex-col flex-1 gap-4"> 
        <gva-card title="访问次数" custom-class="flex-1 h-42">
          <gva-chart :type="7" />
        </gva-card>
      
      <gva-card title="业务访问前十" custom-class="flex-1 h-full"> <!-- 高度自适应 -->
        <gva-chart :type="11" />
      </gva-card>
    </div>
    </div>

  </div>
</template>

<script setup>
import { GvaPluginTable,GvaTable, GvaChart, GvaWiki , GvaNotice , GvaQuickLink , GvaCard , GvaBanner } from "./componenst"
</script>

<style lang="scss" scoped>
.h-250{
  height: 250px;
}
</style>
